<!DOCTYPE html>
<html>

<head>
	<title>TodoList</title>	
	<link rel="stylesheet" href="/css/mdui.css" />
</head>
<script>
</script>

<body>
	<header>
		<div class="mdui-toolbar" style="padding-right:60%">
			<input class="mdui-textfield-input" id="addTodo" type="text" placeholder=" Add TODO" style="width: 400px;background-color: rgb(255, 255, 255);"/>
			<!-- <span class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons" id="upload">&#xe148;</i></span> -->
		</div>
	</header>
	<div class="mdui-container-fluid mdui-float-left" style="width:400px">
		<ul class="mdui-list" id="unfinished">
			<% for(let i=0; i < unfinished_data.length ;i++) {%>
			<li class="mdui-list-item mdui-ripple mdui-shadow-1" 
				name=<%= unfinished_data[i] %>>
				<div class="mdui-checkbox">
					<input type="checkbox" />
				</div>
				<span class="mdui-center"><%= unfinished_data[i] %></span>
				<div class="mdui-float-right"><i class="mdui-icon material-icons">&#xe5ca;</i></div>
			</li>
			<% } %>
		<ul class="mdui-list" id="finished">
		</ul>
	</div>
	<script src="/js/mdui.min.js"></script>
</body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<script>
	const unfinished_root = $('#unfinished')
	let finished_data = []
	let unfinished_data = []
	$('#addTodo').bind('keydown',function(event){
		if(event.keyCode == "13") {
			addTodoFunc();
		}
	});
	$('#upload').on('click',function(){
		uploadFunc();
	});
	$.ajax({
        url: '/getdata',
        method: 'get',
        dataType: 'json',
        success: function(data) {
			console.log(data)
			finished_data = data.finished_data
			unfinished_data = data.unfinished_data
			for(let i=0; i<finished_data.length; i++){
				deleteListener(finished_data[i])
			}
			for(let i=0; i<unfinished_data.length; i++){
				deleteListener(unfinished_data[i])
			}
		}
	});


	function addTodoFunc(){ //为add todo输入框绑定回车事件
		let text = $('#addTodo').val()
		console.log(unfinished_data.findIndex(item => {return item==text}))
		if(unfinished_data.findIndex(item => {return item==text}) != -1 ){
			alert('存在相同名称任务名')
		}
		else if(text.split(" ").length !=1){
			alert('任务名存在空格')
		}
		else if(text.length == 0){
			alert('任务名为空')
		}
		else{
			let new_dom_html = '<li class="mdui-list-item mdui-ripple mdui-shadow-1" name='+text+'>' +
			'<div class="mdui-checkbox">' +
			'<input type="checkbox"/>' +
			'</div>' +
			'<span class="mdui-center">' + text + '</span>' +
			'<div class="mdui-float-right"><i class="mdui-icon material-icons">&#xe5ca;</i></div>'+
			'</li>'
		unfinished_root.append(new_dom_html)
		deleteListener(text)
		unfinished_data.push(text)
		uploadFunc()
			
		}
	}

	function uploadFunc(){ //上传list数据方法
		console.log('unfinished',unfinished_data)
		console.log('finished',finished_data)
		let data = {'finished':finished_data,'unfinished':unfinished_data}
		console.log(data)
		$.ajax({
        url: '/upload',
        method: 'post',
		dataType: 'json',
		contentType: 'application/x-www-form-urlencoded',
		data: {'data':JSON.stringify(data)},
        success: function(data) {
			console.log(data)
			// alert(data.result)

		}
	});
	}
	
	function deleteListener(name){ //删除列表单项方法
		$("[name='"+name+"']").find('i:last').off('click').on('click', function () {
			console.log('删除',name);
			$("[name='"+name+"']").remove();
			unfinished_data.splice(unfinished_data.findIndex(item => item === name), 1)
			console.log('变化后的任务列表',unfinished_data,finished_data)
			uploadFunc()
		})
	}
</script>

</html>